<template>
    <div class="columns-list-wrap" v-title="title">
        <div id="mescroll" class="mescroll"  v-mescroll="{up:'upCallback',size:page.pageSize,num:page.pageNo}">
            <div class="mescroll-bounce">
                <div class="wrapper">
                    <div class="top">
                        <!--<i class="iconfont icon-fanhui" @click="back()"></i>-->
                        <z-history :type="1"></z-history>
                        <span>付费读</span>
                    </div>
                    <column-list :list='columnList' class="list-out"></column-list>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {appService} from '../../service/appService'
    import {actService} from '../../service/activityService'
    import columnlist from '../../component/list/column-list.vue'

    export default {
        components: {'column-list':columnlist },
        // 添加以下代码
        metaInfo () {
            // console.log(this);
            const title = this.shareData.title || "付费读列表"
            return {
                title,
                meta: [
                    { vmid: 'description', name: 'description', content: this.shareData.desc  || '点击查看详情' },
                    { vmid: 'keyWords', name: 'keyWords', content: '运联首页' },
                ]
            }
        },
        data () {
            return {
                title:"付费读列表",
            }
        },
        asyncData({store,route}) {
          store.state.homeStore.page = {pageNo:1,pageSize:5,queryType:3}
             function getColumns(){
                return actService.getColumns(store.state.homeStore.page).then(function(res) {
                    store.state.homeStore.columnList = res.data.datas.datas
                    store.state.homeStore.page.pageNo = 2
                })
            }
            function getshare() {
                let params = {
                    type:32
                }
                return appService.getshare(params).then(function(res){
                    // console.log(res.data.datas);
                    store.state.shareData=res.data.datas
                })
            }
            return Promise.all([
                getColumns(),getshare()
            ])

        },
        computed: {
            //将存在store中的数据取出
            columnList:{
                // getter
                get: function () { return this.$store.state.homeStore.columnList || []},
                // setter
                set: function (newValue) {return newValue}
            },
            page: {
                get: function () { return this.$store.state.homeStore.page || []},
                set: function (newValue) {return newValue}
            },
            shareData:{
                // getter
                get: function () { return this.$store.state.shareData || []},
                // setter
                set: function (newValue) {return newValue}
            },
        },
        mounted: function() {
            let that = this
            this.show=true

//            that.getList()
            let share = {
                hasGet:true,
                title:that.shareData.title || that.title,
                imageUrl: that.shareData.imgUrl,
                brief: that.shareData.desc || '点击查看详情',
                url: that.shareData.dataUrl || window.location.href
            }
            appService.getWxJssdk().then(function () {
                appService.getWxShare(share,that.title)
            })
        },
        methods: {
            //获取列表
            getList:function () {
                let that = this
                let store = that.$store
                actService.getColumns(that.page).then(function(res){
                    if(!res.data || !res.data.datas) return
                    let list = res.data.datas.datas
                    if(that.page.pageNo*1===1){
                        store.state.homeStore.columnList=res.data.datas.datas
                    }else{
                        for(let i in list){
                            store.state.homeStore.columnList.push(list[i])
                        }
                    }
                    that.page.pageNo+=1
                    that.mescroll.endSuccess(list.length);
                })
            },
            //上拉
            upCallback:function () {
                this.getList()
            },
            onEditorBlur(editor) {
                console.log('editor blur!', editor)
            },
            onEditorFocus(editor) {
                console.log('editor focus!', editor)
            },
            onEditorReady(editor) {
                console.log('editor ready!', editor)
            },
            onEditorChange({ editor, html, text }) {
                console.log('editor change!', editor, html, text)
                this.content = html
            }
        }
    }
</script>

<style lang="less">
    @import url("../../assets/css/mescroll.min.css");
    .columns-list-wrap{

        .top{
            width: 100%;
            height: 1.1733rem;
            line-height: 1.1733rem;
            text-align: center;
            font-size: 0.48rem;
            color: #333;
            letter-spacing: 0.3px;
            background: #fff;
            border-bottom: 1px solid rgba(221, 221, 221, 0.5);
            z-index: 100;
        }
        .mescroll{
            background:#fff;
        }
        .list-out{
            padding-top:1rem;
        }
    }

</style>
